
<!DOCTYPE html>
<html>
<head>[#include "../manage/common/head.html" /]
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>编辑宝贝图片</h5>
					</div>
					<div class="ibox-content">
						<table
							class="table table-striped table-bordered table-hover dataTables">
							<thead>
								<tr>
									<th class="text-center">商品名称</th>
									<th class="text-center">商品标题</th>
									<th class="text-center">商品类别</th>
									<th class="text-center">操作项</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="windowModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">新建</h4>
				</div>

				<div class="modal-body">
					<form class="form-horizontal" id="myForm1">
						<div class="form-group">
							<label class="col-sm-2 control-label">商品预览图</label>
							<div class="col-sm-10" id="videoUpload1">
								<div id="image1"></div>
								<input id="deleteId1" type="hidden"></input>
								<div id="progress1"></div>
								<div class="col-sm-12">
									<button id="filePicker1" class="btn btn-primary" style="margin-top: 10px;">选择图片</button>
								</div>
							</div>
						</div>
					</form>
					<form class="form-horizontal" id="myForm2">
						<div class="form-group">
							<label class="col-sm-2 control-label">购物车预览图</label>
							<div class="col-sm-10" id="videoUpload2">
								<div id="image2"></div>
								<input id="deleteId2" type="hidden"></input>
								<div id="progress2"></div>
								<div class="col-sm-12">
									<button id="filePicker2" class="btn btn-primary" style="margin-top: 10px;">选择图片</button>
								</div>
							</div>
						</div>
					</form>
					<form class="form-horizontal" id="myForm3">
						<div class="form-group">
							<label class="col-sm-2 control-label">商品轮播图片</label>
							<div class="col-sm-10" id="videoUpload3">
								<div id="image3"></div>
								<div id="progress3"></div>
								<div class="col-sm-12">
									<button id="filePicker3" class="btn btn-primary" style="margin-top: 10px;">选择图片</button>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer clearfix">
					<div class="form-group col-md-8 col-sm-offset-2 text-center">
						<button type="button" class="btn btn-primary" id="save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	[#include "../manage/common/js.html" /]
	<script>
	$(function() {
		dt = $('.dataTables').dataTable(
			{
				"ordering" : false,
				"searching" : false,
				"info" : true,
				"bLengthChange" : false,
				"pagingType" : "full_numbers",
				"language" : {
					"lengthMenu" : "每页 _MENU_ 条记录",
					"zeroRecords" : "没有找到记录",
					"info" : "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
					"infoEmpty" : "无记录",
					"infoFiltered" : "(从 _MAX_ 条记录过滤)",
					"sEmptyTable" : "表中数据为空",
					"sLoadingRecords" : "载入中...",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "上一页",
						"sNext" : "下一页",
						"sLast" : "末页"
					}
				},
				"serverSide" : true,
				"sAjaxSource" : "${base}/manage/goods/selectInfoList",
				"columns" : [
						{
							"data" : "name",
							"sWidth" : "10%"
						},
						{
							"data" : "title",
							"sWidth" : "10%"
						},
						{
							"data" : "categoryName",
							"sWidth" : "10%"
						},
						{
							"data" : {
								"id" : "id"
							},
							"sWidth" : "10%",
							"render" : function(data) {
								return '<div class="text-center"><button class="btn btn-info btn-sm" type="button" data-title="编辑" data-toggle="modal" data-target="#windowModal" data-id="'
										+ data.id
										+ '" onclick="edit('
										+ data.id
										+ ')">编辑</button><div>';
							}
						} ],
				"fnServerData" : function(sSource, aoData, fnCallback) {
					$.ajax({
						"dataType" : 'json',
						"type" : "POST",
						"url" : sSource,
						"data" : aoData,
						"success" : fnCallback
					});
				}
			});
		})

		function search() {
			dt.fnFilter();
		}

		function restForm() {
			$("#image1").empty();
			$("#image2").empty();
			$("#image3").empty();
			$("#deleteId1").val("");
			$("#deleteId2").val("");
			delWaitId1 = 0;
			delWaitId2 = 0;
			imgId1 = 0;
			imgId2 = 0;
			imgId3 = [];
			goodsId = 0;
		}

		var goodsId = 0;
		var imgId1 = 0;
		var imgId2 = 0;
		var imgId3 = [];
		var delWaitId1 = 0;
		var delWaitId2 = 0;

		$('#windowModal').on('show.bs.modal',function(event) {
			var button = $(event.relatedTarget);
			var recipient = button.data('title');
			var modal = $(this);
			modal.find('.modal-title').text(recipient);
		});

		$("#windowModal").on("hidden.bs.modal", function() {
			restForm();
		});
		
		var su1 = new ss.SimpleUpload({
			
				button : 'filePicker1',
				url : '${base}/manage/upload',
				name : 'file',
				autoSubmit : true,
				responseType : 'json',
				multiple : true,
				allowedExtensions : [ 'jpg', 'jpeg', 'png', 'gif' ],
				data : {
					imgType : 0
				},
				onSubmit : function(filename, ext) {
					var prog = document.createElement('div'), 
					outer = document.createElement('div'), 
					bar = document.createElement('div'), 
					size = document.createElement('div'), 
					self = this;
					
					outer.className = 'progress progress-striped';
					bar.className = 'progress-bar progress-bar-success';

					outer.appendChild(bar);
					prog.appendChild(size);
					prog.appendChild(outer);
					$("#progress1").append(prog);

					self.setProgressBar(bar);
					self.setProgressContainer(prog);
					self.setFileSizeBox(size);
				},
				onComplete : function(filename, response) {
					if($("#deleteId1").val() != "" && $("#deleteId1").val() != delWaitId1){
						del($("#deleteId1").val());
					}
					imgId1 = response.file.id;
					$("#deleteId1").val(imgId1);
					var html = '<div class="img1"><img src="${base}/'+response.file.imgUrl+'" height="150" width="100" alt="..."/></div>'+
								'<div class="divX" onclick="delImg(1,'+imgId1+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
			            		'<button type="button" class="close" style="color: red">&times;</button>'+
			            		'</div>';
					$("#image1").html(html);
				},
				onExtError : function() {
					swal("警告", "只允许上传'jpg', 'jpeg', 'png', 'gif'格式的图片！","warning");
				},
				onErroe : function() {
					swal("错误", "文件上传失败！", "error");
				}
		});
		
		var su2 = new ss.SimpleUpload({
			
				button : 'filePicker2',
				url : '${base}/manage/upload',
				name : 'file',
				autoSubmit : true,
				responseType : 'json',
				multiple : true,
				allowedExtensions : [ 'jpg', 'jpeg', 'png', 'gif' ],
				data : {
					imgType : 1
				},
				onSubmit : function(filename, ext) {
					var prog = document.createElement('div'), 
					outer = document.createElement('div'), 
					bar = document.createElement('div'), 
					size = document.createElement('div'), 
					self = this;
					
					outer.className = 'progress progress-striped';
					bar.className = 'progress-bar progress-bar-success';
		
					outer.appendChild(bar);
					prog.appendChild(size);
					prog.appendChild(outer);
					$("#progress2").append(prog);
		
					self.setProgressBar(bar);
					self.setProgressContainer(prog);
					self.setFileSizeBox(size);
				},
				onComplete : function(filename, response) {
					if($("#deleteId2").val() != "" && $("#deleteId2").val() != delWaitId2){
						del($("#deleteId2").val());
					}
					imgId2 = response.file.id;
					$("#deleteId2").val(imgId2);
					var html = '<div class="img2"><img src="${base}/'+response.file.imgUrl+'" height="150" width="100" alt="..."/></div>'+
								'<div class="divX" onclick="delImg(2,'+imgId2+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
			            		'<button type="button" class="close" style="color: red">&times;</button>'+
			            		'</div>';
					$("#image2").html(html);
					$(".img2").addClass("img-show");
				},
				onExtError : function() {
					swal("警告", "只允许上传'jpg', 'jpeg', 'png', 'gif'格式的图片！","warning");
				},
				onErroe : function() {
					swal("错误", "文件上传失败！", "error");
				}
		});
		
		var su3 = new ss.SimpleUpload({
			
				button : 'filePicker3',
				url : '${base}/manage/upload',
				name : 'file',
				autoSubmit : true,
				responseType : 'json',
				multiple : true,
				multipleSelect : true,
				allowedExtensions : [ 'jpg', 'jpeg', 'png', 'gif' ],
				data : {
					imgType : 2
				},
				onSubmit : function(filename, ext) {
					var prog = document.createElement('div'), 
					outer = document.createElement('div'), 
					bar = document.createElement('div'), 
					size = document.createElement('div'), 
					self = this;
					
					outer.className = 'progress progress-striped';
					bar.className = 'progress-bar progress-bar-success';
	
					outer.appendChild(bar);
					prog.appendChild(size);
					prog.appendChild(outer);
					$("#progress3").append(prog);
	
					self.setProgressBar(bar);
					self.setProgressContainer(prog);
					self.setFileSizeBox(size);
				},
				onComplete : function(filename, response) {
						var html = '<div class="col-sm-2" style="margin-top:10px;"><div id="img3_'+response.file.id+'"><img src="${base}/'+response.file.imgUrl+'" height="150" width="100" alt="..."/></div>'+
											'<div class="divX" onclick="delImg(3,'+response.file.id+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
						            	'<button type="button" class="close" style="color: red">&times;</button>'+
						            	'</div><input id="imageId3_'+response.file.id+'" type="hidden" value="'+response.file.id+'"></input>'+
							            '</div>';
						$("#image3").append(html);
						$("#img3_"+response.file.id).addClass("img-show");
				},
				onExtError : function() {
					swal("警告", "只允许上传'jpg', 'jpeg', 'png', 'gif'格式的图片！","warning");
				},
				onErroe : function() {
					swal("错误", "文件上传失败！", "error");
				}
		});

		$("#save").click(function(){
			if (imgId1 == 0) {
				swal("警告", "请上传商品预览图！", "warning");
				return;
			}
			if (imgId2 == 0) {
				swal("警告", "请上传购物车预览图！", "warning");
				return;
			}
			
			$("#image3 input[type=hidden]").each(function () {
				imgId3.push($(this).val());
			    
			})
			if (imgId3.length == 0) {
				swal("警告", "请上传商品轮播图！", "warning");
				return;
			}
			
			$.post("${base}/manage/goods/saveImageInfo", {
				goodsId : goodsId,
				imgId1 : imgId1,
				imgId2 : imgId2,
				imgId3 : imgId3.join()
			}, function(r) {
				if (r.code == 0) {
					console.log("delWaitId1="+delWaitId1);
					console.log("imgId1="+imgId1);
					if(delWaitId1 != 0 && imgId1 != delWaitId1){
						del(delWaitId1);
					}
					if(delWaitId2 != 0 && imgId2 != delWaitId2){
						del(delWaitId2);
					}
					swal("成功", "保存完成！", "success");
					$('#windowModal').modal('hide');
					search();
				} else {
					swal("错误", r.msg, "error");
				}
			}, 'json')
		})

		function edit(id) {
			$.post("${base}/manage/goods/selectImageInfoList/"+id,function(r){
				goodsId = id;
				if (r.code == 0) {
					var imgIds = "";
					imgId1 = r.imageInfoDate1.id;
					imgId2 = r.imageInfoDate2.id;
					if(imgId1 != 0){
						delWaitId1 = imgId1;
						var html = '<div class="img1"><img src="${base}/'+r.imageInfoDate1.imgUrl+'" height="150" width="100" alt="..."/></div>'+
									'<div class="divX" onclick="delImg(1,'+r.imageInfoDate1.id+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
				            		'<button type="button" class="close" style="color: red">&times;</button>'+
				            		'</div>';
						$("#image1").html(html);
						$(".img1").addClass("img-show");
						$("#deleteId1").val(imgId1);
					}
					if(imgId2 != 0){
						delWaitId2 = imgId2;
						var html = '<div class="img2"><img src="${base}/'+r.imageInfoDate2.imgUrl+'" height="150" width="100" alt="..."/></div>'+
									'<div class="divX" onclick="delImg(2,'+r.imageInfoDate2.id+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
				            		'<button type="button" class="close" style="color: red">&times;</button>'+
				            		'</div>';
						$("#image2").html(html);
						$(".img2").addClass("img-show");
						$("#deleteId2").val(imgId2);
					}
					var imageInfoList = r.imageInfoDateList;
					for(var i = 0;i<imageInfoList.length;i++){
						imgIds += imageInfoList[i].id+",";
						var html = '<div class="col-sm-2" style="margin-top:10px;"><div id="img3_'+imageInfoList[i].id+'"><img src="${base}/'+imageInfoList[i].imgUrl+'" height="150" width="100" alt="..."/></div>'+
											'<div class="divX" onclick="delImg(3,'+imageInfoList[i].id+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
						            	'<button type="button" class="close" style="color: red">&times;</button>'+
						            '</div><input id="imageId3_'+imageInfoList[i].id+'" type="hidden" value="'+imageInfoList[i].id+'"></input>'+
						            '</div>';
						$("#image3").append(html);
						$(".img3_"+imageInfoList[i].id).addClass("img-show"); 
					}
				}
			},'json')
		}

		function delImg(flag,id) {
			swal({
				title : '确定要删除吗?',
				type : 'warning',
				showCancelButton : true,
				cancelButtonColor : '#3085d6',
				confirmButtonColor : '#d33',
				confirmButtonText : '是的,确定!',
				cancelButtonText : '取消'
			}).then(function() {
				$.post("${base}/manage/goods/delImg/" + id, function(r) {
					if (r.code == 0) {
						if(flag == 1){
							$("#image1").empty();
							$("#deleteId1").val("");
							delWaitId1 = 0;
							imgId1 = 0;
						}else if(flag == 2){
							$("#image2").empty();
							$("#deleteId2").val("");
							delWaitId2 = 0;
							imgId2 = 0;
						}else if(flag == 3){
							$("#img3_"+id).parent().remove();
						}
						swal("成功", "已经删除！", "success");
					}
				}, 'json')
			})
		}
		function del(id){
			$.post("${base}/manage/goods/delImg/" + id, function(r) {
				if (r.code != 0) {
					swal("错误", r.msg, "error");
				}
			}, 'json')
		}
	</script>
</body>
</html>
